
import 'js/common.scss';
import './index.scss';
import Vue from 'js/libs/vue';
import {IScroll} from 'js/libs/iscroll-probe';

function generateUUID() {

    var d = new Date().getTime();
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = (d + Math.random()*16)%16 | 0;
      d = Math.floor(d/16);
      return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
}
function mockData() {
    let mock = [];
    for(let i =0; i<20; i++) {
        let id = 'uuid'+generateUUID().slice(-3)
        mock.push({
            text: '我爱中国'+id,
            id: id
        });
    }

    return mock;
}

let myScroll;

new Vue({
    el: '#app',

    data () {
        return {
            isReady: false,
            list: mockData(),
            cur: '',
            tips:''
        };
    },

    mounted () {
        setTimeout(()=>{
            this.iscroller();
        }, 300)
        
    },

    methods: {
        add() {
            this.list.push({
                text: '我是中国人'+String(new Date().getTime()).slice(-3),
                id: 'uuid'+new Date().getTime()+parseInt(Math.random()*10)
            });

            myScroll.refresh();
            myScroll.scrollToElement('#last', 0);
        },

        history() {
            // this.cur = 'uuid'+generateUUID().slice(-3)
            // this.list.unshift({
            //     id: this.cur,
            //     //text: this.cur
            // });
            this.cur = this.list[0].id;
            this.list = mockData().concat(this.list);
            //this.list.unshift(...mockData());
            this.$nextTick(()=>{
                myScroll.scrollToElement('#'+this.cur, 0);
                myScroll.refresh();
            });
            
            
        },

        iscroller() {

            myScroll = new IScroll('#wrapper', { probeType: 3,mouseWheel: true, click: true });
            let self = this;
            let running;
            myScroll.on('scrollEnd', function(){
                //console.log(this.y)
                self.tips = this.y;
                if (this.y ===0) {

                    if (running) return;
                    running = true;

                    //let curId = self.list[0].id;
                    setTimeout(() => {
                        
                        //myScroll.scrollToElement('#'+curId, 0);
                        //document.querySelector('#scroller ul').innerHTML = '<li>Pretty row 2</li><li>Pretty row 24'+new Date().getTime()+'</li><li>Pretty row 2</li><li>Pretty row 22</li><li>Pretty row 2</li><li>Pretty row 25</li><li>Pretty row 2</li><li>Pretty row 27</li><li>Pretty row 2</li><li>Pretty row 23</li>'+document.querySelector('#scroller ul').innerHTML;
                        self.history();
                        //console.log('#'+self.cur)
                        //myScroll.scrollToElement('#'+self.cur, 0);
                        ///myScroll.scrollToElement('#'+curId, 0);
                        //myScroll.scrollToElement('#'+curId, 0);
                        
                        setTimeout(function(){
                            
                                //myScroll.refresh();
                                //myScroll.scrollToElement('#'+curId, 0);
                                running = false;    
                        }, 3000);

                    }, 300);
                    //console.log('fetch data');
                    //_this.fetchData();
                }
            });
            myScroll.on('scroll', function(){
                
                //console.log(this.y)
                // var self = this;
                // moPlace.isScrolling = true;

                //下拉加载更多
                // if (this.y <=30) {

                //     if (running) return;
                //     running = true;

                //     //let curId = self.list[0].id;
                //     setTimeout(() => {
                        
                //         //myScroll.scrollToElement('#'+curId, 0);
                //         //document.querySelector('#scroller ul').innerHTML = '<li>Pretty row 2</li><li>Pretty row 24'+new Date().getTime()+'</li><li>Pretty row 2</li><li>Pretty row 22</li><li>Pretty row 2</li><li>Pretty row 25</li><li>Pretty row 2</li><li>Pretty row 27</li><li>Pretty row 2</li><li>Pretty row 23</li>'+document.querySelector('#scroller ul').innerHTML;
                //         self.history();
                //         //console.log('#'+self.cur)
                //         //myScroll.scrollToElement('#'+self.cur, 0);
                //         ///myScroll.scrollToElement('#'+curId, 0);
                //         //myScroll.scrollToElement('#'+curId, 0);
                        
                //         setTimeout(function(){
                            
                //                 //myScroll.refresh();
                //                 //myScroll.scrollToElement('#'+curId, 0);
                //                 running = false;    
                //         }, 3000);

                //     }, 300);
                //     //console.log('fetch data');
                //     //_this.fetchData();
                // }
                
            });
        }
    }
});

document.addEventListener('touchmove', function (e) { e.preventDefault(); },  false);
